<template>
	<view class="audio-player">
		<view class="controls">
			<view class="play-pause" @tap="togglePlayback">
				<image v-if="!isPlaying" class="paly-icon" src="../../static/pause.png" mode=""></image>
				<image  v-else class="paly-icon" src="../../static/play.png" mode="" ></image>
				<!-- <text v-if="!isPlaying">播放</text> 
					<text v-else>暂停</text> -->
			</view>
		</view>
		<view class="progress-bar" @touchstart="seekStart" @touchmove="seeking" @touchend="seekEnd">
			<view class="progress" :style="{ width: progress + '%' }"></view>
			<view class="seeker" :style="{ left: seekerLeft + '%' }"></view>
		</view>
		<view style="margin-left:60rpx;font-size: 13px"><text style="color:#000">{{ formatSeconds(currentTime)}} </text><text style="color: #B9B9B9">{{'/ ' + formatSeconds(duration) }}</text></view>
	</view>
</template>

<script>
	export default {
		name: "AudioPlayer",
		props: {
			src: String,
		},
		data() {
			return {
				isPlaying: false,
				audioCtx: null,
				duration: 0,
				currentTime: 0,
				progress: 0,
				seekerLeft: 0,
				isSeeking: false
			};
		},
		created() {
			this.initAudio();
		},
		methods: {
			formatSeconds(seconds) {
				// 计算分钟和秒
				var minutes = Math.floor(seconds / 60);
				var remainingSeconds = Math.round(seconds % 60); // 使用Math.round来四舍五入到最接近的整数秒
				
				// 如果分钟或秒数小于10，则在前面补零
				minutes = minutes.toString().padStart(2, '0');
				remainingSeconds = remainingSeconds.toString().padStart(2, '0');
				
				// 返回格式化的时间字符串
				return `${minutes}:${remainingSeconds}`;
			},
			initAudio() {
				console.log(this.src)
				this.audioCtx = uni.createInnerAudioContext();
				this.audioCtx.src = this.src;
				this.audioCtx.onPlay(() => {
					this.isPlaying = true;
				});
				this.audioCtx.onPause(() => {
					this.isPlaying = false;
				});
				this.audioCtx.onTimeUpdate(() => {
					if (!this.isSeeking) {
						this.currentTime = this.audioCtx.currentTime;
						this.progress = (this.currentTime / this.duration) * 100;
						this.seekerLeft = this.progress;
					}
				});
				this.audioCtx.onEnded(() => {
					this.isPlaying = false;
				});
				this.audioCtx.onError((err) => {
					console.error('音频播放错误:', err);
				});
				this.audioCtx.onCanplay(() => {
					this.duration = this.audioCtx.duration;
				});
			},
			togglePlayback() {
				if (this.isPlaying) {
					this.audioCtx.pause();
				} else {
					this.audioCtx.play();
				}
			},
			seekStart() {
				this.isSeeking = true;
			},
			seeking(event) {
				if (!this.duration) return;
				const rect = uni.getSystemInfoSync().windowWidth - 20;
				const ratio = event.mp.touches[0].pageX / rect;
				console.log(ratio, 'ratio')
				if (ratio <= 0) {
					this.seekerLeft = 0;
				} else if (ratio >= 1) {
					this.seekerLeft = 100;
				} else {
					this.seekerLeft = ratio * 100;
					this.currentTime = ratio * this.duration;
				}
			},
			seekEnd() {
				this.audioCtx.seek(this.currentTime);
				this.isSeeking = false;
			}
		},
		beforeDestroy() {
			if (this.audioCtx) {
				this.audioCtx.pause();
				// 这里你可能还需要做其他清理工作，但通常 uni-app 会自动管理
			}
		}
	}
</script>

<style scoped>
	.audio-player {
		display: flex;
		align-items: center;
		width: 686rpx;
		min-height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(74,144,246,0.06);
		border-radius: 24rpx;
		padding: 40rpx 28rpx 40rpx 40rpx;
		box-sizing: border-box;
	}

	.controls {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.play-pause {
		font-size: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.paly-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.progress-bar {
		width: 176rpx;
		height: 12rpx;
		background-color: rgba(114, 122, 142, 0.10);
		border-radius: 6rpx;
		position: relative;
		margin-left: 48rpx;
	}

	.progress {
		height: 100%;
		background-color: #007aff;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 6rpx;
	}

	.seeker {
		width: 28rpx;
		height: 28rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.13);
		border: 2rpx solid #2979FF;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		transform: translateX(-50%);
		z-index: 1;
	}
</style>